.page-gdpm {
  .head-info {
    width: px2rem(750px);
    height: px2rem(640px);
    background: url("../images/phb_1.png") no-repeat top center;
    background-size: 100% 100%;
  }

  .rank-type1 {
    height: px2rem(375px);
    position: relative;
    margin: px2rem(40px) 0 0;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: px2rem(40px) 0 0;

      &.rank-1 {
        width: px2rem(265px);
        height: px2rem(375px);
        background: url("../images/rank_t_1.png") no-repeat top center;
        background-size: 100%;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 0);
        z-index: 10;

        .num {
          width: px2rem(94px);
          height: px2rem(71px);
          overflow: hidden;
          background: url("../images/rank_t_1_1.png") no-repeat top center;
          background-size: 100%;
        }
      }

      &.rank-2 {
        width: px2rem(265px);
        height: px2rem(317px);
        background: url("../images/rank_t_2.png") no-repeat top center;
        background-size: 100%;
        position: absolute;
        left: 50%;
        bottom: 0;
        margin-left: px2rem(-360px);

        .num {
          width: px2rem(56px);
          height: px2rem(43px);
          overflow: hidden;
          background: url("../images/rank_t_2_1.png") no-repeat top center;
          background-size: 100%;
        }
      }

      &.rank-3 {
        width: px2rem(265px);
        height: px2rem(317px);
        background: url("../images/rank_t_3.png") no-repeat top center;
        background-size: 100%;
        position: absolute;
        left: 50%;
        bottom: 0;
        margin-left: px2rem(95px);

        .num {
          width: px2rem(56px);
          height: px2rem(43px);
          overflow: hidden;
          background: url("../images/rank_t_3_1.png") no-repeat top center;
          background-size: 100%;
        }
      }

      .avatar {
        width: px2rem(125px);
        height: px2rem(125px);
        border-radius: 100%;
        overflow: hidden;
        position: relative;
        top: px2rem(-10px);
        border: px2rem(4px) solid #fec899;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .username {
        color: #0d4741;
        font-size: px2rem(24px);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 0 px2rem(30px);
        width: 100%;
      }

      .point {
        color: #0d4741;
        margin: px2rem(10px) 0 0;
        font-size: px2rem(24px);
      }

    }
  }

  .rank-type2 {
    padding: px2rem(10px) px2rem(20px);

    li {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: px2rem(10px) 0;

      .num {
        width: px2rem(100px);
        text-align: center;
        color: #0d4741;
        font-size: px2rem(24px);
        flex-shrink: 0;
      }
    }

    .avatar-info {
      display: flex;
      align-items: center;
      flex: 1;
      overflow: hidden;

      .pic {
        width: px2rem(65px);
        height: px2rem(65px);
        flex-shrink: 0;
        overflow: hidden;
        border-radius: 100%;
        border: 1px solid #fec899;
        margin: 0 px2rem(20px) 0 0;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .username {
        color: #0d4741;
        font-size: px2rem(26px);
        overflow: hidden;
        flex: 1;
        text-overflow: ellipsis;
        white-space: nowrap
      }
    }

    .point {
      flex-shrink: 0;
      text-align: center;
      width: px2rem(150px);
      font-size: px2rem(24px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }
  }
}